<template>
 <div>
    <div v-if="data.isMobile==false" style="width: 300px;display: inline-block;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-top: 20px;">
        <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
            菜单
        </div>
        <div style="padding: 10px 10px;">
            <div class="right-button" @click="()=>{
              rightPageId=1;
              if(rightPageId==1){
                getListAll();
              }else{
                getListMy();
              }
            }">
                所有问题
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
            </div>
            <div class="right-button" @click="()=>{
              rightPageId=2;
              if(rightPageId==1){
                getListAll();
              }else{
                getListMy();
              }
            }">
                我的问题
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
            </div>
        </div>
    </div>
    <div v-if="data.isMobile==false" style="width: calc(100% - 320px);display: inline-block;float: right;margin-top: 20px;">
        <div>
            <div style="width: 100%;padding: 20px 20px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 15px;">
                <a-textarea v-model="content" :disabled="isSending" style="border-radius: 5px;" placeholder="请输入问题" :auto-size="{
    minRows:5,
    maxRows:5
  }">

                </a-textarea>
                <div style="text-align: right;margin-top: 10px;">
                    <a-button @click="publishQuestion" :loading="isSending" type="primary">发表</a-button>
                </div>
            </div>
            <div style="margin-bottom: 15px;">
                {{ rightPageId==1?'全部问题':'我的问题' }}
            </div>
            <div v-if="isGetting==true" style="width: 100%;text-align: center;font-size: 20px;color: gray;">
              <a-button :loading="true" style="background-color: white;color: black;">请稍后</a-button>
            </div>
            <div v-if="questions.length==0 && isGetting==false" style="width: 100%;text-align: center;font-size: 20px;color: gray;">
              没有问题
            </div>
            <div v-if="isGetting==false">
<div v-for="item in questions" v-bind:key="item" style="width: 100%;padding: 20px 20px;border-radius: 5px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);position: relative;margin-bottom: 20px;">
              <a-button  v-if="item.userInfo.account==data.loginedUserInfo.account" style="position: absolute;right: 20px;top: 20px;color: black;padding: 0 7px;border-radius: 100px;" @click="deleteSingle(item)">
                <svg width="16" height="16" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
              </a-button>
              <div style="font-size: 18px;">
                {{ item.userInfo.name }}
              </div>
              <div style="font-size: 14px;color: gray;margin-top: 5px;">
                {{ "分数：" + item.userInfo.score + " 位次：" + item.userInfo.ranking }}
              </div>
              <div style="font-size: 14px;color: gray;margin-top: 5px;">
                {{ "发表于" + formatDate(item.time) }}
              </div>
              <div style="margin-top: 10px;font-size: 16px;">
                {{ item.content }}
              </div>
              <div style="width: 100%;margin-top: 10px;text-align: right;position: relative;">
                <a-input v-model="item.inputContent" style="width: calc(100%);border-radius: 100px;background-color: rgb(242,242,242);height: 35px;padding-right: 70px;" placeholder="在这里输入评论"></a-input>
                <a-button @click="publishComment(item.account,item.inputContent,item)" style="border-radius: 100px;position: absolute;right: 1px;height: 33px;border: 3px solid rgb(0,0,0,0);top: 1px;" :loading="isSendingCommentItem==item">发送</a-button>
              </div>
              <div v-if="item.a.length!=0" style="width: 100%;border-radius: 5px;padding: 10px 10px;line-height: 25px;margin-top: 10px;border: 1px solid rgb(230,230,230);">
                <div v-bind:key="subitem" v-for="subitem in item.a" style="position: relative;">
                  {{ subitem.userInfo.name + "：" + subitem.content }}
                  
              <a-button v-if="subitem.userInfo.account==data.loginedUserInfo.account" style="position: absolute;right: 0px;top: -5px;color: black;padding: 0 7px;border-radius: 100px;background-color: rgba(0,0,0,0);" @click="deleteSingle(subitem)">
                <svg width="16" height="16" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
              </a-button>
                </div>
              </div>
            </div>
            </div>
            
        </div>
    </div>
    <div v-if="data.isMobile" style="width: 100vw;height: calc(100vh - 55px);background-color: white;">
      <div style="width: 100%;padding: 20px 20px;padding-bottom: 10px;">
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(6)">专业咨询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 22px;font-weight: bold;">问答区</span>
      </div>
      <div style="width: 100%;height: calc(100vh - 55px - 55.29px);overflow-y: scroll;">
        <div style="width: 100%;padding: 20px 20px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 15px;">
                <a-textarea v-model="content" :disabled="isSending" style="border-radius: 5px;" placeholder="请输入问题" :auto-size="{
    minRows:5,
    maxRows:5
  }">

                </a-textarea>
                <div style="text-align: right;margin-top: 10px;">
                    <a-button @click="publishQuestion" :loading="isSending" type="primary">发表</a-button>
                </div>
            </div>
            <div style="padding: 20px 20px;">
              <div style="margin-bottom: 15px;">
                {{ rightPageId==1?'全部问题':'我的问题' }}
            </div>
            <div v-if="isGetting==true" style="width: 100%;text-align: center;font-size: 20px;color: gray;">
              <a-button :loading="true" style="background-color: white;color: black;">请稍后</a-button>
            </div>
            <div v-if="questions.length==0 && isGetting==false" style="width: 100%;text-align: center;font-size: 20px;color: gray;">
              没有问题
            </div>
            <div v-if="isGetting==false">
<div v-for="item in questions" v-bind:key="item" style="width: 100%;padding: 10px 10px;border-radius: 5px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);position: relative;margin-bottom: 20px;">
              <a-button  v-if="item.userInfo.account==data.loginedUserInfo.account" style="position: absolute;right: 20px;top: 20px;color: black;padding: 0 7px;border-radius: 100px;" @click="deleteSingle(item)">
                <svg width="16" height="16" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
              </a-button>
              <div style="font-size: 18px;">
                {{ item.userInfo.name }}
              </div>
              <div style="font-size: 14px;color: gray;margin-top: 5px;">
                {{ "分数：" + item.userInfo.score + " 位次：" + item.userInfo.ranking }}
              </div>
              <div style="font-size: 14px;color: gray;margin-top: 5px;">
                {{ "发表于" + formatDate(item.time) }}
              </div>
              <div style="margin-top: 10px;font-size: 16px;">
                {{ item.content }}
              </div>
              <div style="width: 100%;margin-top: 10px;text-align: right;position: relative;">
                <a-input v-model="item.inputContent" style="width: calc(100%);border-radius: 100px;background-color: rgb(242,242,242);height: 35px;padding-right: 70px;" placeholder="在这里输入评论"></a-input>
                <a-button @click="publishComment(item.account,item.inputContent,item)" style="border-radius: 100px;position: absolute;right: 1px;height: 33px;border: 3px solid rgb(0,0,0,0);top: 1px;" :loading="isSendingCommentItem==item">发送</a-button>
              </div>
              <div v-if="item.a.length!=0" style="width: 100%;border-radius: 5px;padding: 10px 10px;line-height: 25px;margin-top: 10px;border: 1px solid rgb(230,230,230);">
                <div v-bind:key="subitem" v-for="subitem in item.a" style="position: relative;">
                  {{ subitem.userInfo.name + "：" + subitem.content }}
                  
              <a-button v-if="subitem.userInfo.account==data.loginedUserInfo.account" style="position: absolute;right: 0px;top: -5px;color: black;padding: 0 7px;border-radius: 100px;background-color: rgba(0,0,0,0);" @click="deleteSingle(subitem)">
                <svg width="16" height="16" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
              </a-button>
                </div>
              </div>
            </div>
            </div>
            </div>
      </div>
    </div>
 </div>
</template>

<script>
import axios from 'axios';

export default{
  data(){
    return{
      rightPageId:1,
      questions:[],
      isGetting:false,
      isSending:false,
      content:'',
      isSendingCommentItem:undefined,
    }
  },
  mounted(){
    if(this.data.loginedUserInfo==undefined){
        this.changePage(7);
        return;
    }
    this.getListAll();
  },
  methods:{
    formatDate(timeString) {
  // 使用正则表达式提取年、月、日、小时、分钟、秒的值
  const regex = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
  const matches = timeString.match(regex);

  if (matches) {
    // 构建格式为YYYY-MM-DD HH:MM:SS的字符串
    const year = matches[1];
    const month = matches[2];
    const day = matches[3];
    const hours = matches[4];
    const minutes = matches[5];
    const seconds = matches[6];

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

  // 如果无法匹配正则表达式，则返回原始时间字符串
  return timeString;
},
    getListMy(){
      this.isGetting=true;
      var config = {
   method: 'get',
   url: '/api/v1/qa/listMy?data=' + JSON.stringify({
    account:this.data.loginedUserInfo.account
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
  this.isGetting=false;
   if(res.data.status==1){
    this.questions=res.data.results;
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    deleteSingle(item){
      var config = {
   method: 'post',
   url: '/api/v1/qa/delete?data=' + JSON.stringify(item),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
   if(res.data.status==1){
    this.getListAll();
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    publishComment(toAccount,content,item){
      if(content=='' || content==undefined){
        this.$message.error({
          content:'请输入评论'
        })
        return;
      }
      this.isSendingCommentItem=item;
      var config = {
   method: 'post',
   url: '/api/v1/qa/add',
   headers: { 
      'Accept': '*/*'
   },
   data : JSON.stringify({
    account:this.data.loginedUserInfo.account,
    toAccount:toAccount + item.time,
    content:content
   })
};

axios(config)
.then((res)=> {
  this.isSendingCommentItem=undefined;
   if(res.data.status==1){
    this.getListAll();
   }else{
    this.$message.error({
      contnet:res.data.content
    })
   }
})
    },
    publishQuestion(){
      if(this.content==''){
        this.$message.error({
          content:'请输入问题'
        })
        return;
      }
      this.isSending=true;
      var config = {
   method: 'post',
   url: '/api/v1/qa/add',
   headers: { 
      'Accept': '*/*'
   },
   data : JSON.stringify({
    account:this.data.loginedUserInfo.account,
    toAccount:'-',
    content:this.content
   })
};

axios(config)
.then((res)=> {
  this.isSending=false;
   if(res.data.status==1){
    this.content="";
    this.getListAll();
   }else{
    this.$message.error({
      contnet:res.data.content
    })
   }
})

    },
    getListAll(){
      if(this.rightPageId==2){
        this.getListMy();
        return;
      }
      this.isGetting=true;
      var config = {
   method: 'get',
   url: '/api/v1/qa/listAll',
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res)=> {
  this.isGetting=false;
   if(res.data.status==1){
    this.questions=res.data.results;
   }else{
    this.$message.error({
      contnet:res.data.content
    })
   }
})
    }
  },
  props:{
    data:{
         type:Object
      },
    changePage:undefined
  },
}
</script>

<style scoped>

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(242,242,242);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}

</style>